<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拟态</title>
    <style>



     .btn{
         width: 100px;
         height: 60px;
         border-radius: 55px;
         background: linear-gradient(145deg, #f0f0f0, #cacaca);
         box-shadow:  8px 8px 16px #696969,
         -8px -8px 16px #ffffff;
     }

        .btn:hover{
            width: 100px;
            height: 60px;
            border-radius: 55px;
            background: #e0e0e0;
            box-shadow: inset 8px 8px 16px #696969,
            inset -8px -8px 16px #ffffff;
        }
    </style>
</head>
<body>

<button class="btn">
    提交
</button>

</body>
</html>